<template>
  <div>
    <a-table
      style="width: 100%; overflow-x: auto"
      size="default"
      :columns="columns"
      :data-source="getList"
      :row-key="(record) => record.id"
    >
      <div slot="user_info" slot-scope="text, record">
        <div class="content">
          <div class="img">
            <a-avatar shape="square" :size="48" icon="user" :src="record.logo" />
          </div>

          <div class="txt">
            <h3>{{ record.nickname }}</h3>
            <p>{{ record.tel }}</p>
          </div>
        </div>
      </div>

      <span slot="action" slot-scope="text, record, index">
        <a-button type="link" size="small" @click="$emit('remove', getIndex(index))">删除</a-button>
      </span>
    </a-table>
    <el-pagination
      style="margin-top: 10px"
      :page-size="size"
      :current-page="page"
      background
      layout="prev, pager, next"
      @current-change="(e) => (page = e)"
      :total="items.length"
    >
    </el-pagination>
  </div>
</template>

<script>
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '用户信息',
    scopedSlots: {
      customRender: 'user_info',
    },
  },
  {
    title: '真实姓名',
    dataIndex: 'name',
  },
  {
    title: '会员等级',
    dataIndex: 'level',
  },
  {
    title: '服务分类',
    dataIndex: 'cat_id',
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action',
    },
    width: 180,
  },
]

export default {
  props: {
    items: {
      type: Array,
      default() {
        return []
      },
    },
  },

  computed: {
    getIndex() {
      return (index) => {
        let { page, size } = this,
          active = (page - 1) * size + index

        return active
      }
    },

    getList() {
      let { items, page, size } = this,
        index = (page - 1) * size

      console.log(
        'JSON.parse(JSON.stringify(items)).splice(index, size) || [],',
        JSON.parse(JSON.stringify(items)).splice(index, size) || []
      )
      return JSON.parse(JSON.stringify(items)).splice(index, size) || []
    },
  },

  data() {
    return {
      size: 20,
      page: 1,
      columns,
    }
  },

  methods: {},
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  align-items: center;
  height: 48px;
  max-width: 300px;
  overflow: hidden;

  .txt {
    margin-left: 16px;
    flex: 1;
    overflow: hidden;

    * {
      margin: 0;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    h3 {
      color: rgba(0, 0, 0, 0.85);
    }

    p {
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style>
